<template>
  <div class="manage">
    <el-dialog
        title="新增部门"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="30%"
        style="text-align: center"
        :before-close="handleClose"
    >
      <!--用户的表单信息-->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px" label-position="right">
        <el-form-item label="部门名称" prop="deptname">
          <el-input placeholder="请输入部门名称" v-model="form.deptname"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="depthearderid">
          <el-select v-model="form.depthearderid" placeholder="请选择负责人">
            <el-option
                v-for="item in lists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全员" prop="safeerid">
          <el-select v-model="form.safeerid" placeholder="请选择安全员">
            <el-option
                v-for="item in listsSafer"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input type="text" placeholder="请输入备注" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑部门"
        :visible.sync="dialogEditVisible"
        v-if="dialogEditVisible"
        width="30%"
        style="text-align: center"
        :before-close="handleEditClose"
    >
      <el-form ref="formEdit" :rules="rulesEdit" :inline="true" :model="formEdit" label-width="80px" label-position="right">
        <el-form-item label="部门编号" prop="deptid" required>
          <el-input v-model="formEdit.deptid" disabled></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="depthearderid">
          <el-select v-model="formEdit.depthearderid" placeholder="请选择负责人" @change="getHeader">
            <el-option
                v-for="item in lists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全员" prop="safeerid">
          <el-select v-model="formEdit.safeerid" placeholder="请选择安全员" @change="getSafer">
            <el-option
                v-for="item in listsSafer"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancelEdit">取 消</el-button>
              <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="handleAdd" type="primary" size="mini">
        + 新增
      </el-button>
      <!--          form搜索区域-->
      <el-form :inline="true" :model="userForm" size="mini">
        <el-form-item label="状态：" prop="status">
          <el-select v-model="userForm.status" placeholder="请选择状态">
            <el-option label="有效" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="deptname" >
          <el-input placeholder="请输入部门名称" v-model="userForm.deptname"></el-input>
        </el-form-item>
        <el-form-item label="负责人：" prop="depthearder">
          <el-input placeholder="请输入负责人姓名" v-model="userForm.depthearder"></el-input>
        </el-form-item>
        <el-form-item label="安全员：" prop="safeer">
          <el-input placeholder="请输入安全员姓名" v-model="userForm.safeer"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            fixed
            label="编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="deptname"
            label="部门名称"
            align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.deptname }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="depthearder__name"
            label="负责人"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="safeer__name"
            label="安全员"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="部门状态"
            align="center"
        >
          <template slot-scope="scope">
            <span :style="{ color: scope.row.status ===true ? 'green' :'red'}"
            >
              {{scope.row.status===true?'有效':'无效'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
        >
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       style="background-color: blue"
                       @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-button type="info"
                       size="mini"
                       icon="el-icon-s-tools"
                       :style="{background: scope.row.status ===true ? 'red' :'green'}"
                       @click="handleStop(scope.row)"
            >
              {{scope.row.status===true?'禁用':'启用'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {deptAdd,deptEdit,deptInfo} from '@/api/dept'
import {userinfo} from "@/api/user";

export default {
  name: 'BusinessManagement',
  data () {
    return {
      dialogVisible: false,
      dialogEditVisible:false,
      form: {
        deptname: '',
        depthearderid: '',
        safeerid:'',
        desc: '',
      },
      formEdit:{
        deptid:'',
        safeerid:'',
        depthearderid:''
      },
      rules: {
        deptname: [
          {
            required: true,
            message: '请输入部门名称',
            trigger:'blur'
          }
        ],
        depthearderid: [
          {
            required: true,
            message: '请选择负责人',
            trigger:'blur'
          }
        ],
        safeerid: [
          {
            required: true,
            message: '请选择安全员',
            trigger:'blur'
          }
        ]
      },
      rulesEdit:{
        safeerid:[
          {
            required: true,
            message: '请选择安全员',
            trigger:'blur'
          }
        ],
        depthearderid: [
          {
            required: true,
            message: '请选择负责人',
            trigger:'blur'
          }
        ]
      },
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      lists:[],
      listsSafer:[],
      userForm: {
        status: '1',
        deptname:'',
        depthearder:'',
        safeer:''
      }
    }
  },
  mounted() {
    this.created();
  },
  methods: {
    created() {
      userinfo({}).then(res=>{
        if(res.code===1){
          let params = {
            page_number: 1,
            page_size: res.total_count
          }
          userinfo(params).then(res=>{
            this.lists = res.data.filter(element=>(element.role==='负责人')&&(element.is_active===true))
            this.listsSafer = res.data.filter(element=>(element.role==='安全员')&&(element.is_active===true))
          })
        }
      })
      this.getList()
    },
    //提交用户表单
    submit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
              deptAdd(this.form).then((res)=>{
                //新增用户的接口
                if(res.code===1){
                  console.log('新增成功')
                  this.$message.success({
                    message:'新增成功',
                    type:'success'
                  })
                }else{
                  console.log(res.message)
                  this.$message.error(res.message)
                }
                this.dialogVisible = false
                console.log(this.form, 'form')
                //清空表单数据
                this.$refs.form.resetFields()
                //重新获取列表的接口
                this.getList()
              })

          }
        })
    },
    //弹窗关闭的时候
    handleClose () {
        this.dialogVisible = false
        this.$refs.form.resetFields()
        this.form = {}
    },
    cancel () {
      this.handleClose()
    },
    handleEditClose(){
      this.dialogEditVisible = false
      this.formEdit = {}
    },
    cancelEdit(){
      this.handleEditClose()
    },
    edit(row){
      this.dialogEditVisible = true
      this.formEdit.deptid = row.id
      this.formEdit.depthearderid = row.depthearder
      this.formEdit.safeerid = row.safeer
    },
    handleStop(row){
      this.formEdit.deptid = row.id
      this.formEdit.depthearderid = row.depthearder
      this.formEdit.safeerid = row.safeer
      let params={
        ...this.formEdit,
        status:!row.status
      }
      deptEdit(params).then((res)=>{
        if(res.code===1){
          this.$message.success({
            message:res.message,
            type:'success'
          })
          this.getList()
        }
      })
    },
    submitEdit(){
      this.$refs.formEdit.validate((valid)=>{
        if(valid){
          deptEdit(this.formEdit).then(res=>{
            if(res.code === 1){
              this.$message.success(res.message)
              this.formEdit = {}
              this.dialogEditVisible = false
              this.getList()
            }
          })
        }
      })
    },
    //分页方法
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList();
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList();
    },
    //获取的列表数据
    getList () {
      //获取的列表数据
      let params = {
        page_size:this.paginations.pageSize,
        page_number:this.paginations.current,
        ...this.userForm
      }
      deptInfo(params).then(resp => {
        if (resp.code === 1) {
          console.log(resp.data)
          this.tableData = resp.data
          this.paginations.total = resp.total_count
        }else{
          this.$message.error(resp.message)
        }
      })
    },
    handleAdd () {
      this.dialogVisible = true
      this.form = {}
    },
    //列表的查询
    onSubmit () {
      this.getList()
    },
    getHeader(){
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    getSafer(){
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .manage-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
